<template>
  <el-dialog
    :visible.sync="state.visible"
    :fullscreen="fullscreen"
    :custom-class="!fullscreen ? 'custom-height' : 'custom-fullscreen'"
    :close-on-click-modal="false"
    :show-close="false"
    @closed="close"
  >
    <el-row slot="title" type="flex">
      <el-col :span="20">{{ title }}</el-col>
      <el-col :span="4" style="text-align: right">
        <svg-icon
          :icon-class="!fullscreen ? 'fullscreen' : 'exit-fullscreen'"
          style="cursor: pointer; margin-right: 10px"
          @click="
            () => {
              fullscreen = !fullscreen;
            }
          "
        />
        <i class="el-icon-close" style="cursor: pointer" @click="close" />
      </el-col>
    </el-row>
    <el-form
      ref="dataForm"
      :model="form"
      label-position="right"
      label-width="100px"
    >
      <el-row :gutter="18">
        <el-col :span="24">
          <el-form-item
            label="货架编号"
            prop="slelfNumber"
            :rules="{
              required: true,
              message: '货架编号不能为空',
              trigger: 'blur',
              whitespace: true
            }"
          >
            <el-input v-model="form.slelfNumber" :disabled="form.id!=undefined" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="货架名称">
            <el-input v-model="form.shelfName" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="货架行数"
            prop="col"
            :rules="{
              required: true,
              message: '货架行数不能为空',
              trigger: 'blur',
              whitespace: true
            }"
          >
            <el-input v-model="form.col" :disabled="form.id!=undefined" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="货架列数"
            prop="line"
            :rules="{
              required: true,
              message: '货架列数不能为空',
              trigger: 'blur',
              whitespace: true
            }"
          >
            <el-input v-model="form.line" :disabled="form.id!=undefined" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input v-model="form.remark" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">
        取消
      </el-button>
      <el-button
        type="primary"
        :loading="state.confirmSubmit"
        :disabled="state.confirmSubmit"
        @click="onSubmit"
      >
        确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import form from '@/components/diboot/mixins/form'

export default {
  name: 'ShelfForm',
  mixins: [form],
  props: {
    formData: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      baseApi: '/warehouse/shelves'
    }
  },
  methods: {
    async enhance(values) {
      values.warehouseAreaId = this.formData.warehouseAreaId
      values.warehouseName = this.formData.warehouseName
      values.warehouseAreaCode = this.formData.warehouseAreaCode
    },
    afterOpen() {
      this.form.col && (this.form.col = String(this.form.col))
      this.form.line && (this.form.line = String(this.form.line))
    }
  }
}
</script>
<style lang="scss" scoped></style>
